Typography

Typography elements on this page provide you with a complete set of typographic styles that can capture a deep hierarchy of information, ranging from page title to H4 tag to multi-column body copy.

The prescribed Google fonts are Roboto and Hind. They can be downloaded for free from Google.

Content Page Title

Face: Roboto Bold, Size: 32px, Line Spacing: 40px, Top Margin: 50px, Color #064e6e

To use: Include "IMF_Typography.css" and use an H1 element.

H1 Header

Face: Roboto Bold, Size: 32px, Line Spacing: 40px, Top Margin: 50px, Color #064e6e

To use: Include "IMF_Typography.css" and use the H1 element or another heading size element or paragraph element with the "h1" class.

H2 Header

Face: Roboto Bold, Size: 24px, Line Spacing: 30px, Top Margin: 50px, Color #064e6e

To use: Include "IMF_Typography.css" and use the H2 element or another heading size element or paragraph element with the "h2" class.

H3 Header

Face: Roboto Bold, Size: 20px, Line Spacing: 25px, Top Margin: 50px, Color #064e6e

To use: Include "IMF_Typography.css" and use the H3 element or another heading size element or paragraph element with the "h3" class.

H4 Header

Face: Roboto Bold, Size: 16px, Line Spacing: 20px, Top Margin: 50px, Color #064e6e

To use: Include "IMF_Typography.css" and use the H4 element or another heading size element or paragraph element with the "h4" class.

Intro Paragraph Text Style

Face: Hind Regular, Size: 20px, Line Spacing: 25px, Top Margin: 15px, Color #323232

To use: Include "IMF_Typography.css" and use the ?? element. The Intro Paragraph text style should never be used under the H4 Header Style since the H4 Header Style text size is smaller than the Intro Paragraph text size.

Body Paragraph Text Style

Face: Hind Regular, Size: 16px, Line Spacing: 20px, Top Margin: 15px, Color #323232

To use: Include "IMF_Typography.css" and use the ?? element

Highlight Text Style

Face: Hind Bold, Size: 16px, Line Spacing: 20px, Top Margin: 15px, Color #323232

To use: Include "IMF_Typography.css" and give the class bold to any element

Inline Hyperlink Text Style

Face: Hind Regular, Size: 18px, Line Spacing: 24px, Top Margin: 15px, Color #1195d9, Hover Color $dfBlue

Inline Hypertext Links (anchor tags) will use this default styling. Links are #0086c8 with no underline by default, then on hover are #0086c8 with an underline. Visited links are #008d11 with no underline.

Kicker Link Text Style

Face: Hind Bold, Size: 16px, Line Spacing: 20px, Top Margin: 15px, Link color #0086c8, Hover color #0086c8, Visited color #008d11

Kicker Links indicate that content is continued on another page, and look like this... more ›. The arrow that follows is a text character. Kicker Links are #0086c8 with no underline by default, then on hover are #0086c8 with an underline. Visited links are #008d11 with no underline.

Body List Text Style

Face: Hind Regular, Size: 16px, Line Spacing: 24px, Top Margin: 15px, Left Padding 20px, Color #323232. Nested list items have a Top Margin of 15px.

To use: Include "IMF_Typography.css" and use the ??? element. The list bullets and numbers are bold text character. Lists can include hyperlinks.

List style 1, line one
- Nested List Item
- Nested List Item
List style 1, line two
List style 1, line three
List style 1, line four

List style 2, line one
List style 2, line two
1. Nested Ordered List Item
2. Nested Ordered List Item
List style 2, line three
List style 2, line four

Full Width One Column Text

Content Header H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.

Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.